<template>
	<view class="spread flex" :class="{'box-spread': showFlag}">
		<view class="flex spread3">
			<view class="spread-item flex flex-col items-center" v-for="item in PositionDictionary" :key="item.label"
				:style="item.style">
				<template v-if="isAch == 1">
					<image :src="item.front" mode="widthFix" v-if="item.dir == 0"></image>
					<image :src="item.back" mode="widthFix" v-else></image>
				</template>
				<template v-else>
					<image src="@/static/tarot-bg.png" mode="widthFix"></image>
					<text class="spread-name">{{item.name}}</text>
				</template>
			</view>
			<view class="process flex flex-col justify-between">
				<text>收尾阶段</text>
				<text>爆发阶段</text>
				<text>创业阶段</text>
				<text>筹备阶段</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const PositionDictionary = ref([{
			name: "",
			style: {
				width: '100%'
			}
		},
		{
			name: "",
			style: {
				width: 'calc((100% - 20rpx) / 2)',
				'align-items': 'flex-end'
			}
		},
		{
			name: "",
			style: {
				width: 'calc((100% - 20rpx) / 2)',
				'align-items': 'flex-start'
			}
		},
		{
			name: "",
			style: {
				width: 'calc((100% - 120rpx) / 2)',
				'align-items': 'flex-end'
			}
		},
		{
			name: "",
			style: {}
		},
		{
			name: "",
			style: {
				width: 'calc((100% - 120rpx) / 2)',
				'align-items': 'flex-start'
			}
		},
		{
			name: "",
			style: {
				width: 'calc((100% - 220rpx) / 2)',
				'align-items': 'flex-end'
			}
		},
		{
			name: "",
			style: {}
		},
		{
			name: "",
			style: {}
		},
		{
			name: "",
			style: {
				width: 'calc((100% - 220rpx) / 2)',
				'align-items': 'flex-start'
			}
		},
		{
			name: "初月",
			style: {
				position: 'absolute',
				top: '30rpx',
				left: '50%',
				transform: 'translate(-50%, 0) rotate(-84deg)',
				'transform-origin': '50% 220%'
			}
		},
		{
			name: "次月",
			style: {
				position: 'absolute',
				top: '22rpx',
				left: '50%',
				transform: 'translate(-50%, 0) rotate(-58deg)',
				'transform-origin': '50% 215%'
			}
		},
		{
			name: "三月",
			style: {
				position: 'absolute',
				top: '0',
				left: '50%',
				transform: 'translate(-50%, 0) rotate(-32deg)',
				'transform-origin': '50% 213%'
			}
		},
		{
			name: "四月",
			style: {
				position: 'absolute',
				top: '0',
				left: '50%',
				transform: 'translate(-50%, 0) rotate(32deg)',
				'transform-origin': '50% 213%'
			}
		},
		{
			name: "五月",
			style: {
				position: 'absolute',
				top: '22rpx',
				left: '50%',
				transform: 'translate(-50%, 0) rotate(58deg)',
				'transform-origin': '50% 215%'
			}
		},
		{
			name: "六月",
			style: {
				position: 'absolute',
				top: '30rpx',
				left: '50%',
				transform: 'translate(-50%, 0) rotate(84deg)',
				'transform-origin': '50% 220%'
			}
		},
	])
	onMounted(() => {
		console.log(cardList.value, isAch.value)
		nextTick(() => {
			if (isAch.value == 1 && cardList.value?.length) {
				// isAch.value = 0
				dataFormat()
			}
		})
	})
	const dataFormat = () => {
		PositionDictionary.value.map((item, idx) => {
			item.dir = cardList.value[idx].dir
			item.front = cardList.value[idx].tarot.front
			item.back = cardList.value[idx].tarot.back
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		height: auto;
		padding: 20rpx 0;
	}

	.spread3 {
		flex-wrap: wrap;
		gap: 20rpx;
		zoom: 0.8;
		transform: translateX(-12%);
	}

	.spread-item {
		position: static;
		box-sizing: border-box;
	}

	.process {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		font-size: 30rpx;
		transform: translateX(50%);
		color: orange;
	}
</style>